<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="vendors/bootstrap-4.0.0/css/bootstrap.css"/>
    <script src="vendors/jquery/jquery-3.5.1.min.js"></script>
    <script src="vendors/bootstrap-4.0.0/js/bootstrap.bundle.js"></script>
</head>
<body>

<div class="container" style="margin-top: 100px;">

    <div style="display: none" id="alert-dialog" class="alert alert-danger alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        <span id="alert">失败提示</span>
    </div>
    <div style="display: none" id="alert-login" class="alert alert-success alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        <span>对不起，您还未登录，请先&nbsp;&nbsp;<a href="login.html" style="font-size: 24px;font-weight: bold;">登录</a></span>
    </div>
    <div id="content" style="display: none">
        <button type="button" class="btn-primary" onclick="logout()">退出登录</button>
        <br/>
        <br/>
        <table class="table table-hover table-bordered" style="text-align: center;width: 60%">
            <thead>
            <th colspan="2">个人信息</th>
            </thead>
            <tr>
                <td>Id</td>
                <td id="id"></td>
            </tr>
            <tr>
                <td>姓名</td>
                <td id="username"></td>
            </tr>
            <tr>
                <td>邮箱</td>
                <td id="email"></td>
            </tr>
            <tr>
                <td>手机号</td>
                <td id="mobile"></td>
            </tr>
            <tr>
                <td>全名</td>
                <td id="fullname"></td>
            </tr>
        </table>
    </div>


    <script>

        function logout() {
            localStorage.removeItem("token");
            window.location = "/login.html";
        }

        function refreshToken(){
            let token = localStorage.getItem("token");
            token = JSON.parse(token);
            $.ajax({
                url: "/refresh-token?refreshToken="+token.refresh_token,
                type: "POST",
                data: JSON.stringify({}),
                headers: {
                    'Content-Type': 'application/json'  //application/x-www-form-urlencoded  application/json
                },
                dataType: "json",
                success: function (data, status) {
                    if (!data.success) {
                        alert(data.msg);
                        return;
                    }
                    console.log(data);
                    localStorage.setItem("token", data.data);
                    window.location.href = "/index.html";
                },
                error:function(data,status){
                    alert("token刷新失败，有可能refrsh-token已经过了有效期，可以适当延长refresh-token有效期并重试");
                }
            });
        }

        $(function () {
            let token = localStorage.getItem("token");
            if (!token) {
                $("#alert-login").show();
            } else {
                token = JSON.parse(token);
                $.ajax({
                    url: "http://127.0.0.1:8761/r1",
                    type: "GET",
                    headers: {
                        'Content-Type': 'application/json',  //application/x-www-form-urlencoded  application/json
                        "Authorization": "Bearer " + token.access_token
                    },
                    dataType: "json",
                    success: function (data, status) {
                        $("#id").text(data.id);
                        $("#username").text(data.username);
                        $("#email").text(data.email);
                        $("#fullname").text(data.fullname);
                        $("#mobile").text(data.mobile);
                        $("#content").show();
                    },
                    error: function (data, status) {
                        console.log(data);
                        //如果不是
                        if (data.responseJSON.status !== 601) {
                            $("#alert-dialog").show();
                            $("#alert").html(data.responseJSON.msg + '&nbsp;&nbsp;<a href="login.html" style="font-size: 24px;font-weight: bold;">重新登录</a>');
                        }else{
                            $("#alert-dialog").show();
                            $("#alert").html(data.responseJSON.msg+',点击' + '<button type="button" class="btn-primary" onclick="refreshToken()">按钮</button>刷新token，或者'+'&nbsp;&nbsp;<a href="login.html" style="font-size: 24px;font-weight: bold;">重新登录</a>');
                        }

                    }
                });
            }
        });

    </script>
</div>


</body>
</html>